<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>某个订单的详细信息</title>
    <script src="https://map.qq.com/api/gljs?v=1.exp&key=KLQBZ-LR6CD-3U64B-PN3P3-ZFGT6-LFFJU"></script>
    <script src="${pageContext.request.contextPath}/statics/js/jquery-3.6.0.js"></script>

    <style type="text/css">
        html,
        body {
            height: 100%;
            margin: 0px;
            padding: 0px;
        }

        #container {
            width: 80%;
            height: 70%;
        }
    </style>
</head>
<body>

        任务号：<input type="text" id="usage_id" name="usage_id">
        <button id="btn">提交查询位置</button>

    <div id="container"></div>

    <script type="text/javascript">
        let center = new TMap.LatLng(39.984104, 116.307503);
        //初始化地图
        let map = new TMap.Map("container", {
            zoom: 15,
            center: center
        });

        console.log(123);//√
        $(function () {
            $("#btn").click(function () {
                $.post({
                    url:"${pageContext.request.contextPath}/location/l1",
                    data:{"usage_id":$("#usage_id").val()},
                    success:function (data) {
                        console.log(data);
                        let obj = JSON.parse(data);
                        console.log(obj);
                        console.log(obj[0].lat);

                        let path = [
                            //起始
                            new TMap.LatLng(obj[0].lon, obj[0].lat),
                            //现在
                            new TMap.LatLng(obj[2].lon, obj[2].lat),
                            //终止
                            new TMap.LatLng(obj[1].lon, obj[1].lat)
                        ];

                        let polylineLayer = new TMap.MultiPolyline({
                            map, // 绘制到目标地图
                            // 折线样式定义
                            styles: {
                                'style_blue': new TMap.PolylineStyle({
                                    'color': '#3777FF', //线填充色
                                    'width': 4, //折线宽度
                                    'borderWidth': 2, //边线宽度
                                    'borderColor': '#FFF', //边线颜色
                                    'lineCap': 'round' //线端头方式
                                })
                            },
                            geometries: [{
                                styleId: 'style_blue',
                                paths: path
                            }],
                        });

                        let marker = new TMap.MultiMarker({
                            map,
                            styles: {
                                'car-down': new TMap.MarkerStyle({
                                    'width': 40,
                                    'height': 40,
                                    'anchor': {
                                        x: 20,
                                        y: 20,
                                    },
                                    'faceTo': 'map',
                                    'rotate': 180,
                                    'src': 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/car.png',
                                }),
                                "start": new TMap.MarkerStyle({
                                    "width": 25,
                                    "height": 35,
                                    "anchor": { x: 16, y: 32 },
                                    "src": 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/start.png'
                                }),
                                "end": new TMap.MarkerStyle({
                                    "width": 25,
                                    "height": 35,
                                    "anchor": { x: 16, y: 32 },
                                    "src": 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/end.png'
                                })
                            },
                            geometries: [{
                                id: 'car',
                                styleId: 'car-down',
                                position: new TMap.LatLng(obj[0].lon, obj[0].lat),
                            },{
                                "id": 'start',
                                "styleId": 'start',
                                "position": new TMap.LatLng(obj[0].lon, obj[0].lat)
                            }, {
                                "id": 'end',
                                "styleId": 'end',
                                "position": new TMap.LatLng(obj[1].lon, obj[1].lat)
                            }]
                        });
                        marker.moveAlong({
                            'car': {
                                path,
                                speed: 250
                            }
                        }, {
                            autoRotation:true
                        })
                    }
                })

            })

        });


    </script>
</body>
</html>
